<template>
  <Card 
    :hover="true" 
    class="cursor-pointer"
    @click="handleClick"
  >
    <!-- 竞赛头部 -->
    <div class="flex items-start justify-between mb-4">
      <div class="flex items-center space-x-3">
        <div class="w-10 h-10 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center">
          <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
          </svg>
        </div>
        <div>
          <h3 class="text-lg font-semibold text-gray-900">{{ contest.title }}</h3>
          <p class="text-sm text-gray-600">{{ getContestTypeText(contest.type) }}</p>
        </div>
      </div>
      
      <!-- 删除按钮 -->
      <button 
        class="text-sm text-gray-400 hover:text-red-500 transition-colors duration-200"
        @click.stop="handleRemove"
      >
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
        </svg>
      </button>
    </div>
    
    <!-- 竞赛描述 -->
    <div class="mb-4">
      <p class="text-sm text-gray-600 line-clamp-2">{{ contest.description || '暂无描述' }}</p>
    </div>
    
    <!-- 竞赛状态 -->
    <div class="mb-4">
      <Badge 
        :variant="getStatusVariant(contest.status)"
        size="md"
      >
        {{ getStatusText(contest.status) }}
      </Badge>
    </div>
    
    <!-- 竞赛信息 -->
    <div class="space-y-2 mb-4">
      <div class="flex items-center justify-between text-sm">
        <span class="text-gray-500">开始时间</span>
        <span class="text-gray-900">{{ formatDateTime(contest.start_time) }}</span>
      </div>
      <div class="flex items-center justify-between text-sm">
        <span class="text-gray-500">结束时间</span>
        <span class="text-gray-900">{{ formatDateTime(contest.end_time) }}</span>
      </div>
      <div class="flex items-center justify-between text-sm">
        <span class="text-gray-500">参与人数</span>
        <span class="text-gray-900">{{ contest.participant_count }} 人</span>
      </div>
      <div class="flex items-center justify-between text-sm">
        <span class="text-gray-500">题目数量</span>
        <span class="text-gray-900">{{ contest.questions?.length || 0 }} 题</span>
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="flex justify-end">
      <Button 
        :variant="getButtonVariant(contest.status)"
        size="sm"
        @click.stop="handleClick"
      >
        {{ getButtonText(contest.status) }}
      </Button>
    </div>
  </Card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import Card from '@/components/ui/Card.vue'
import Button from '@/components/ui/Button.vue'
import Badge from '@/components/ui/Badge.vue'

interface Props {
  contest: {
    id: number
    title: string
    description?: string
    type: 'individual' | 'team'
    status: 'upcoming' | 'running' | 'ended'
    start_time: string
    end_time: string
    participant_count: number
    questions?: any[]
  }
}

const props = defineProps<Props>()

const emit = defineEmits<{
  remove: [contestId: number]
}>()

const router = useRouter()

const getContestTypeText = (type: string) => {
  return type === 'individual' ? '个人赛' : '团队赛'
}

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'upcoming': '即将开始',
    'running': '进行中',
    'ended': '已结束'
  }
  return statusMap[status] || status
}

const getStatusVariant = (status: string) => {
  const variantMap: Record<string, 'success' | 'warning' | 'info' | 'default' | 'primary' | 'danger'> = {
    'upcoming': 'warning',
    'running': 'success',
    'ended': 'default'
  }
  return variantMap[status] || 'default'
}

const getButtonText = (status: string) => {
  const textMap: Record<string, string> = {
    'upcoming': '查看详情',
    'running': '参加竞赛',
    'ended': '查看结果'
  }
  return textMap[status] || '查看详情'
}

const getButtonVariant = (status: string) => {
  const variantMap: Record<string, 'success' | 'warning' | 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'> = {
    'upcoming': 'outline',
    'running': 'primary',
    'ended': 'outline'
  }
  return variantMap[status] || 'outline'
}

const handleClick = () => {
  router.push(`/contests/${props.contest.id}`)
}

const handleRemove = () => {
  if (confirm(`确定要取消收藏 "${props.contest.title}" 吗？`)) {
    emit('remove', props.contest.id)
  }
}

const formatDateTime = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>
